Introduction

The application you are developing only has one screen so far. However, more screens may be required as more features are implemented. To navigate from one screen to another, it’s important to set up the navigation hierarchy of the application as well as the different navigation rules. This is done by using a combination of navigators, such as Stacks, Tabs, Drawers, Switches, or Modals. In this exercise, you will set up a Stack Navigator to which you can add routes as you create additional screens.

Scenario

When using the completed Little Lemon app, there should be multiple routes for users to move between screens. For example, moving from the Home screen to the Profile screen to make changes to personal details. Users should also be able to move back to the previous screen. Once all of the screens for your app are built, you might have a navigational flow similar to the one illustrated in the flowchart below:

The Stack Navigator from the React Navigation library is a simple tool that can meet these needs, so let’s incorporate it into the app.

Instructions

Step 1: React Navigation Installation

Begin by installing the React Navigation library with its dependencies. Follow the steps outlined in the Getting Started guide .

Remember to install the latest compatible versions of react-native-screens and react-native-safe-area-context for Expo projects. To do so, run the following command in your terminal:

npx expo install react-native-screens react-native-safe-area-context

Step 2: NavigationContainer component

In the App.js component (entry point), wrap your app in a NavigationContainer component.

Here is some code you can use as a reference: 

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import OnboardingScreen from './screens/Onboarding';

export default function App() {
  return (
    <NavigationContainer>
      <OnboardingScreen />
    </NavigationContainer>
  );
}

Step 3: Native stack navigator installation

The libraries you have installed so far are the building blocks and shared foundations for navigators. Each navigator in React Navigation lives in its own library.

To use the native stack navigator, you need to install @react-navigation/native-stack and run the following command:

npm install @react-navigation/native-stack

Step 4: App.js component structure

It’s time to set up your first stack navigator in the application. Recall that a stack navigator provides a way for your application to transition between screens, where each new screen is placed on top of a stack.

First, you should create a new Stack instance. This is done by calling the createNativeStackNavigator method from the @react-navigation/native-stack library . Make sure you do this outside your React Native components, below your top-level imports.

This Stack instance contains two objects: a Navigator and a Screen .

Let’s start by defining your navigator. You should render a new Stack.Navigator component. It’s important that this Navigator is a child of the NavigatorContainer component you created in Step 2. 

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Step 5: Adding a screen to the Navigator

Next, add a new Stack.Screen component inside the Stack.Navigator , as a direct child. Each Stack.Screen offers a prop named “component”. This prop tells the screen which React Native component to use to display content. In this case, it should point to the Onboarding screen you created previously.

After implementing this change, the application should start up as it did before and display the Onboarding flow.

The code below summarizes all the changes you need to make inside the App.js file. 

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import OnboardingScreen from './screens/Onboarding';

const Stack = createNativeStackNavigator();

function App() {
 return (
   <NavigationContainer>
     <Stack.Navigator>
       <Stack.Screen name="Onboarding" component={OnboardingScreen} />
     </Stack.Navigator>
   </NavigationContainer>
 );
}
export default App;

A new navigation header may render with the React Navigation library. If so, refer to the documentation to discover how to remove it.

Step 6: Create a screen component

Your next step is to create a new screen component under the “screens” folder named Profile.js .

For now, this component should just render a container view with a white background and a text component as children that shows the text “Profile Page”.

You’ll practice implementing all UI elements for the Profile screen later on in another exercise.

Step 7: Define conditional rendering

Now, create the navigation structure for the authentication flow by conditionally rendering screens. This depends on whether the user has completed the onboarding phase or not.

You can define different screens with conditions. For example, if the user is signed in, you can define Home or Profile. If the user is not signed in, you can just define the Onboarding screen.

Step 8: Set up local state and device storage

To determine if the user has successfully completed the onboarding and is signed in, use a combination of the local React state and device storage.

To do this, follow the guidelines below:

Use the below code snippet as a reference when following the guidelines above: 

if (state.isLoading) {
 // We haven't finished reading from AsyncStorage yet
 return <SplashScreen />;
}

return (
 <Stack.Navigator>
   {state.isOnboardingCompleted ? (
     // Onboarding completed, user is signed in
     <Stack.Screen name="Profile" component={ProfileScreen} />
   ) : (
     // User is NOT signed in
     <Stack.Screen name="Onboarding" component={OnboardingScreen} />
   )}
 </Stack.Navigator>
);

For more information about implementing an authentication flow with React Navigation, refer to the guide from the React Navigation documentation.

Conclusion

In this exercise, you created an authentication flow with React Navigation to conditionally render one screen or another, depending on whether the user has completed the onboarding phase or not.

Furthermore, you persisted information in the disk using the AsyncStorage library, so when you start up the application, the previous state of the user journey across the app is remembered.